<template>
    <div>
        <div id="myCharts" ref="myCharts" style="width:500px;height:500px">
            
        </div>
        <div id="Charts" ref="Charts" style="width:500px;height:500px">
            
        </div>
        <div id="main" ref="main" style="width:500px;height:500px">
            
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {};
    },
    mounted() {
        const myCharts = echarts.init(this.$refs.myCharts);
        let option = {
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        };
        myCharts.setOption(option);
        this.aaa();
        this.bbb()
    },
    methods: {
        aaa() {
            var chartDom = document.getElementById('Charts');
            var Charts = echarts.init(chartDom);

            var options = {
                series: [
                    {
                        type: 'gauge',
                        center: ['50%', '60%'],
                        startAngle: 200,
                        endAngle: -20,
                        min: 0,
                        max: 60,
                        splitNumber: 12,
                        itemStyle: {
                            color: '#FFAB91'
                        },
                        progress: {
                            show: true,
                            width: 30
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                width: 30
                            }
                        },
                        axisTick: {
                            distance: -45,
                            splitNumber: 5,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        splitLine: {
                            distance: -52,
                            length: 14,
                            lineStyle: {
                                width: 3,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: -20,
                            color: '#999',
                            fontSize: 20
                        },
                        anchor: {
                            show: false
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            width: '60%',
                            lineHeight: 40,
                            borderRadius: 8,
                            offsetCenter: [0, '-15%'],
                            fontSize: 60,
                            fontWeight: 'bolder',
                            formatter: '{value} °C',
                            color: 'auto'
                        },
                        data: [
                            {
                                value: 20
                            }
                        ]
                    },
                    {
                        type: 'gauge',
                        center: ['50%', '60%'],
                        startAngle: 200,
                        endAngle: -20,
                        min: 0,
                        max: 60,
                        itemStyle: {
                            color: '#FD7347'
                        },
                        progress: {
                            show: true,
                            width: 8
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        detail: {
                            show: false
                        },
                        data: [
                            {
                                value: 20
                            }
                        ]
                    }
                ]
            };
            setInterval(function() {
                const random = +(Math.random() * 60).toFixed(2);
                Charts.setOption({
                    series: [
                        {
                            data: [
                                {
                                    value: random
                                }
                            ]
                        },
                        {
                            data: [
                                {
                                    value: random
                                }
                            ]
                        }
                    ]
                });
            }, 2000);
            Charts.setOption(options);
        },
        bbb() {
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option = {
                series: [
                    {
                        type: 'gauge',
                        axisLine: {
                            lineStyle: {
                                width: 30,
                                color: [[0.3, '#67e0e3'], [0.7, '#37a2da'], [1, '#fd666d']]
                            }
                        },
                        pointer: {
                            itemStyle: {
                                color: 'auto'
                            }
                        },
                        axisTick: {
                            distance: -30,
                            length: 8,
                            lineStyle: {
                                color: '#fff',
                                width: 2
                            }
                        },
                        splitLine: {
                            distance: -30,
                            length: 30,
                            lineStyle: {
                                color: '#fff',
                                width: 4
                            }
                        },
                        axisLabel: {
                            color: 'auto',
                            distance: 40,
                            fontSize: 20
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: '{value} km/h',
                            color: 'auto'
                        },
                        data: [
                            {
                                value: 70
                            }
                        ]
                    }
                ]
            };
            setInterval(function() {
                myChart.setOption({
                    series: [
                        {
                            data: [
                                {
                                    value: +(Math.random() * 100).toFixed(2)
                                }
                            ]
                        }
                    ]
                });
            }, 2000);
            myChart.setOption(option);
        }
    }
};
</script>

<style  scoped>
</style>